<template>
  <div class="main-content">
    <div>
      <div style="display: flex;grid-gap: 30px">
        <div style="width: 300px;height: auto">
          <el-row :gutter="10">
            <el-col :span="6" style="margin-top: 5px; margin-bottom: 5px;">
              <a v-if="data.categoryId==null" style="color: red" href="/front/categoryBook">全部</a>
              <a v-else style="color: #333" href="/front/categoryBook">全部</a>
            </el-col>
           <el-col  :span="6"  v-for="(item,index) in data.categoryList" :key="index" style="margin-top: 5px; margin-bottom: 5px;">
             <div v-if="data.categoryId==item.id">
               <a  style="color: red" :href="'/front/categoryBook?name='+ item.title+'&categoryId=' + item.id">{{item.title}}</a>
             </div>
             <div v-else>
               <a style="color: #333" :href="'/front/categoryBook?name='+ item.title+'&categoryId=' + item.id">{{item.title}}</a>
             </div>
           </el-col>
          </el-row>
        </div>
        <div style="flex: 1;margin-left: 220px;margin-top: 10px">
          <el-input clearable @clear="reset" style="width: 260px;margin-right: 5px"  v-model="data.name" placeholder="请输入书名查询" :prefix-icon="Search"></el-input>
          <el-button type="primary" @click="loadAll">查询</el-button>
        </div>
      </div>

      <div style="margin-top: 40px">
        <el-row :gutter="20">
         <el-col @click="goPage('/front/bookDetail?id='+item.id)" :span="6" v-for="item in data.books" :key="item.id" style="margin-bottom: 10px">
           <div class="book-box" >
             <img style="width: 100%;height: 200px;border-radius: 5px" :src="item.img">
           </div>
           <div style="margin: 5px 0" class="line1">{{item.name}}</div>
           <div style="margin: 5px 0;font-size: 12px;color: #666" class="line1">{{item.author}}</div>
           <div style="margin: 5px 0;font-size: 12px;color: #666">{{item.num}}本</div>
         </el-col>
        </el-row>
      </div>

    </div>
  </div>
</template>


<script setup>

import {reactive} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {Search} from "@element-plus/icons-vue";

const data=reactive({
  user:JSON.parse(localStorage.getItem('code_user')||"{}"),
  categoryList:[],
  categoryName:router.currentRoute.value.query.name,
  books:[],
  categoryId:router.currentRoute.value.query.categoryId,
  name:null
})


const loadBook=()=>{
  request.get("/book/selectAll",{
    params:{
      categoryId:data.categoryId,
      name:data.name
    }
  }).then(res=>{
    if (res.code==='200'){
      data.books=res.data
    }else {
      ElMessage.error(res.msg)
    }
  })
}
loadBook()

const load=()=>{
  request.get("/category/selectAll").then(res=>{
    if(res.code==='200'){
      data.categoryList=res.data
    }else {
      ElMessage.error(res.msg)
    }
  })
}
load()

const loadAll=()=>{
  data.categoryId=null;
  loadBook()
}

const reset=()=>{
  data.categoryId=null;
  data.name=null;
  loadBook()
}

const goPage=(path)=>{
  location.href=path
}

</script>


<style scoped>
.main-content{
  max-width: 900px;
  margin: 10px auto;
}
.book-box{
  overflow: hidden;
}
.book-box:hover img{
  scale: 1.2;
}
</style>